<template>
	<view class="page-body" :style="'height:' + height + 'px'">
		<scroll-view class="nav-left" scroll-y :style="'height:' + height + 'px'" :scroll-top="scrollLeftTop" scroll-with-animation>
			<view class="nav-left-item" @click="categoryClickMain(index)" :key="index" :class="index == categoryActive ? 'active' : ''" v-for="(item, index) in classifyData">
				{{ item.name }}
			</view>
		</scroll-view>
		<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:' + height + 'px'" scroll-with-animation>
			<checkbox-group @change="checkboxChange">
				<view v-for="(looks, index) in classifyData" :key="index" class="box">
					<view class="uni-list">
							<label :id="i == 0 ? 'first' : ''" class=" uni-list-cell uni-list-cell-pd"  v-for="(item, i) in looks.looks" :key="i">
								<view>{{ item.name }}</view>
								<view><checkbox :value="item.name" :checked="item.checked" /></view>
							</label>
					</view>
				</view>
			</checkbox-group>
		</scroll-view>
	</view>
</template>

<script>
import classifyData from '../../../common/classify.data.js';
var _self;
export default {
	data() {
		return {
			name: 'wkiwi',
			height: 0,
			categoryActive: 0,
			scrollTop: 0,
			scrollLeftTop: 0,
			classifyData: classifyData,
			arr: [0, 584, 1168, 1752, 2336, 2805, 3274, 3858, 4442, 4911, 5380, 5734, 6203, 6672, 7017], //初始值，后边计算会根据手机适配覆盖
			leftItemHeight: 51, //49行会计算出新值进行覆盖
			navLeftHeight: 0, //左边scroll-view 内层nav的总高度
			diff: 0, //左边scroll-view 内层nav的总高度与视口之差
			tabBarHeight: 0 ,//如果此页面为Tab页面，自己改变高度值,,一般tab高度为51,
			result: []
		};
	},
	onLoad: function() {
		_self = this;
		this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight;
	},
	onReady() {
		this.getHeightList();
	},
	onNavigationBarButtonTap(e) {
		var result = [];
		for (var i = 0; i < _self.classifyData.length; i++) {
			var item = _self.classifyData[i];
			var tmp = item.looks.filter(function(e) {
				return e.checked && e.checked != undefined
			}).map(function(e) {
				return e.name
			})
			if (tmp.length > 0)
				result = result.concat(tmp)
		}

		uni.showLoading({
			title: '加载中'
		})
		uni.request({
			url: _self.websiteUrl + '/getCtos',	
			method: 'POST',
			header: {
				'content-type': 'application/x-www-form-urlencoded'
			},
			data: {"ctos[]": result.toString(), "size": 25, "token": uni.getStorageSync("token").token},
			success: (t) => {
				uni.setStorageSync("conditions", result.toString());
				uni.setStorage({
					key: 'regionInfo',
					data: t.data.payload,
					success: () => {
						uni.hideLoading();
						uni.navigateTo({
							url: 'conditionInfo/conditionInfo'
						})
					}
				})
			},
			fail: (t) => {
				uni.hideLoading();
				uni.showToast({
					icon: 'none',
					title: '请求失败!'
				})
			}
		})
	},
	methods: {
		checkboxChange(e) {
			var items = this.classifyData,
				values = e.detail.value;
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				var item = items[i].looks
				for (var j = 0; j < item.length; j++) {
					if (values.includes(item[j].name)) {
						this.$set(item[j], 'checked', true);
					} else {
						this.$set(item[j], 'checked', false);
					}
				}
			}
		},
		getHeightList() {
			let _this = this;
			let selectorQuery = uni.createSelectorQuery();
			selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
				_this.leftItemHeight = rects[0].height;
				_this.navLeftHeight = _this.leftItemHeight * classifyData.length;
				_this.diff = _this.navLeftHeight - _this.height;
			});
			selectorQuery
				.selectAll('.box')
				.boundingClientRect(function(rects) {
					let arr = [0];
					let top = 0;
					rects.forEach(function(rect) {
						top += rect.height;
						arr.push(top);
					});
					_this.arr = arr;
				})
				.exec();
		},
		scroll(e) {
			let _this = this;
			if (this.timeoutId) {
				clearTimeout(this.timeoutId);
			}
			this.timeoutId = setTimeout(function() {
				//节流
				_this.scrollHeight = e.detail.scrollTop + 1 + _this.height / 2;
				//+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个
				//若想使切换参考线为屏幕顶部请删除 _this.height/2
				for (let i = 0; i < _this.arr.length; i++) {
					let height1 = _this.arr[i];
					let height2 = _this.arr[i + 1];
					if (!height2 || (_this.scrollHeight >= height1 && _this.scrollHeight < height2)) {
						_this.categoryActive = i;
						_this.diff > 0 && (_this.scrollLeftTop = Math.round((_this.categoryActive * _this.diff) / (classifyData.length - 1)));
						return false;
					}
				}
				_this.categoryActive = 0;
				_this.timeoutId = undefined;
			}, 10);
		},
		categoryClickMain(index) {
			this.categoryActive = index;
			this.scrollTop == this.arr[index] ? (this.scrollTop = this.scrollTop + 1) : (this.scrollTop = this.arr[index]); //防止两次相等造成点击不触发滚动时间
		}
	},
	components: {}
};
</script>

<style>
.uni-list::before {
	height: 0;
}

.page-body {
	display: flex;
	background: #fff;
	overflow: hidden;
}

.nav {
	display: flex;
	width: 100%;
}

.nav-left {
	width: 25%;
	background: #fafafa;
}

.nav-left-item {
	height: 100upx;
	border-right: solid 1px #f1f1f1;
	border-bottom: solid 1px #f1f1f1;
	font-size: 30upx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nav-left-item:last-child {
	border-bottom: none;
}
.nav-right {
	width: 75%;
}
.box {
	display: block;
	overflow: hidden;
	border-bottom: 20upx solid #f3f3f3;
	/* min-height: 100vh; */
	/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
}
.box:last-child {
	border: none;
	min-height: 100vh;
}
.nav-right-item {
	width: 100%;
	/* padding: 11upx; */
	font-size: 28upx;
	background: #fff;
}

.active {
	color: #ff80ab;
	background: #fff;
	border-right: 0;
}
::-webkit-scrollbar {
	/*取消小程序的默认导航条样式*/
	width: 0;
	height: 0;
	color: transparent;
}
</style>
